<template>
  <view class="wrap">
    <healthClass :specialList="healclass"></healthClass>
    <view class="bd t1">
      <scroll-view scroll-y="true" :style="{ height: swiperHeight + 'px' }">
        <view style="text-align: center" v-if="!list.length">暂无数据</view>
        <view class="s-list">
          <view
            class="s-item u-border-bottom"
            v-for="(v, index) in list"
            :key="index"
            @tap="goDetail(v)"
          >
            <view
              class="iconfont iconarrow-right u-m-r-20"
              style="font-size: 40upx; color: #c3c3c3"
            ></view>
            <view
              style="font-size: 28upx; font-weight: 500; padding: 10upx 0"
              class="titles u-line-2"
              >{{ v.title }}</view
            >
            <image
              :src="v.content"
              mode="aspectFit"
              style="height: 100upx"
              class="imgs"
            ></image>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import healthClass from "@/components/healthClass.vue";
export default {
  components: {
    healthClass,
  },
  data() {
    return {
      page: {},
      list: [],
      healclass: [], //专题目录
      swiperHeight: "", //计算高度
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getInjectPlanMore(this.page.pageNum + 1);
  },
  onReady: function (res) {
    var _this = this;
    uni.getSystemInfo({
      success: (resu) => {
        const query = uni.createSelectorQuery();
        //.scroll_y 是滚动区域，得到高度来计算剩余高度
        query.select(".t1").boundingClientRect();
        query.exec(function (res) {
          _this.height = resu.windowHeight - res[0].top;
          console.log("打印页面的剩余高度", _this.height);
          _this.swiperHeight = _this.height;
        });
      },
      fail: (res) => {},
    });
    // this.getUiStyle();
  },
  onLoad() {
    this.getSpecialType();
  },
  methods: {
    getSpecialType() {
      //获取专题列表
      this.config.get("/proposal/getSpecialType").then((res) => {
        if (res.data.code === 200) {
          this.healclass = res.data.data;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // 获取接种计划
    getInjectPlan(pageNumber) {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/proposal/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getInjectPlanMore(pageNumber) {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/proposal/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 详情
    goDetail(v) {
      uni.navigateTo({
        url: `/pages/main/child/backlog/suggest-detail?id=${v.id}&title=${v.title}&isThu=${v.isThumbs}`,
      });
    },
  },
  mounted() {
    this.getInjectPlan();
  },
};
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  padding-top: 315rpx;
}
.s-list {
  padding: 30upx;
  .s-item {
    width: 100%;
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    background-color: white;
    flex-direction: row-reverse;
    .titles {
      width: 260%;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>